<template>
  <el-affix :offset="0">
    <el-menu
        :default-active="activeIndex"
        class="el-menu-demo menu"
        mode="horizontal"
        @select="handleSelect"
        :router="true"
        background-color="#545c64"
        text-color="#fff"
        active-text-color="#4bcdff"
    >
      <img src="/static/logo/logo4.png" @click="goHome" style="height: 40px;padding: 10px 20px" alt="花生果工具网"/>
      <el-menu-item index="/">工具</el-menu-item>
      <el-sub-menu index="2">
        <template #title>其他项目</template>
        <el-menu-item index="/otherProjects">常用工具</el-menu-item>
        <el-menu-item index="2-2">待开发...</el-menu-item>
        <el-menu-item index="2-3">待开发...</el-menu-item>
        <el-sub-menu index="2-4">
          <template #title>待开发...</template>
          <el-menu-item index="2-4-1">待开发...</el-menu-item>
          <el-menu-item index="2-4-2">待开发...</el-menu-item>
          <el-menu-item index="2-4-3">待开发...</el-menu-item>
        </el-sub-menu>
      </el-sub-menu>
      <el-menu-item index="/openSource">开源小功能</el-menu-item>
      <el-menu-item index="4" disabled>待开发...</el-menu-item>
    </el-menu>
  </el-affix>
</template>

<script>
import {ref} from 'vue'

export default {
  name: "TopNav",
  data() {
    return {
      activeIndex: "1"
    }
  },
  created() {
    this.activeIndex = ref('/')
  },
  methods: {
    handleSelect(a1,a2) {
      console.log(a1,a2)
    },
    goHome(){
      this.$router.push('/')
    }
  }
}

</script>

<style scoped>
.menu{
}
</style>
